// eslint-disable-next-line import/no-anonymous-default-export
// React当中要习惯  按需引入 
import { Link } from 'react-router-dom';
import { useSelector ,useDispatch }  from 'react-redux';
import { createAction4Add2Car } from '../store/acions';

import { 加入到购物车 } from '../store';

import { getInfoFromAjax } from '../store/asyncFunction';


// 如果我们使用的是 rtk的方式 那么我们得通过  它生成的actionCreator来得到 action对象
import { updateUserName } from '../store/slice/user'
// 请记住  updateUserName 是一个 actionCreator  是创建action的一个方法


import { Button } from 'antd'

const Home = ()=>{

    // useSelector 传入一个函数 该函数会得到所有的共享的状态，然后由我们来决定返回
    // 哪些状态来在当中组件内使用
    const store = useSelector(state=>state);
    const dispatch = useDispatch();

  
  
    const add2Cart = ()=>{

        // 异步的修改  我们可以在dispatch 传入一个函数 该函数可以执行异步的操作
        dispatch(getInfoFromAjax)

        // dispatch( createAction4Add2Car(Date.now())  )

    
        // dispatch(加入到购物车(Date.now())) 

     
        // dispatch({ 
        //     type: '加入到购物车',
        //     payload: Date.now()
        // })
    }

    const updateUserNameByRtk = ()=>{
        //  我们需要 dispatch 发送一个什么action ?????
        // updatUseName(传入一个值) =》 这个值就会给到action当中的payload
        dispatch( updateUserName('dixon') )
    }

    return (
        <div>
           <div>我就是首页</div>   
           <div>  store in the home: { JSON.stringify(store) }   </div>
            <Link to="/list">跳转到列表也  by Link</Link>    
            <hr />
            <Link to='/login'>用户登录</Link>
             <hr />
            <button onClick={add2Cart}>添加内容到 全局的cart当中</button>

            <button onClick={ updateUserNameByRtk }>修改用户名</button>

            <hr />

            <div>

                联系使用 antd的组件

                <Button loading shape="round"> 我是一个按钮 </Button>

            </div>

        </div>  
        
    )
}

export default Home